import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import { beforeEachHanler } from './permission'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    // 登录
    {
      path: "/login",
      name: "LoginPage",
      component: () => import("@/views/login/LoginPage.vue"),
    },
    // 路由的嵌套, 路由的嵌套 往往可以用于页面的布局
    // 前台页面
    {
      path: "/frontend",
      name: "FrontendLayout",
      component: () => import("@/views/frontend/FrontendLayout.vue"),
      children: [
        // 博客的列表页, 注意这里如果使用/打头就是绝对路径
        // 非/打头 相对路径: parent route path + sub route path
        // /frontend/blog/list
        // 注意: 路由的名称 必须全局唯一 BlogList 后台已经使用FrontendBlogList 
        // 为什么名称需要唯一: router.push({name: FrontendBlogList})
        {
          path: "blog/list",
          name: "FrontendBlogList",
          component: () => import("@/views/frontend/BlogList.vue"), 
        }
      ]
    },
    // 后台页面
    {
      path: "/backend",
      name: "BackendLayout",
      component: () => import("@/views/backend/BackendLayout.vue"),
      children: [
        {
          path: "blog",
          name: "BackendBlogList",
          component: () => import("@/views/backend/blog/BlogList.vue"),
        },
        {
          path: "blog/create",
          name: "BackendBlogCreate",
          component: () => import("@/views/backend/blog/BlogCreate.vue"),
        },
        {
          path: "tag",
          name: "TagList",
          component: () => import("@/views/backend/tag/TagList.vue"),
        },
        {
          path: "comment",
          name: "CommentList",
          component: () => import("@/views/backend/comment/CommentList.vue"),
        }
      ]
    },
    {
      path: "/errors/403",
      name: "PermissionDeny",
      component: () => import("@/views/errors/PermissionDeny.vue"),
    },
    // 匹配前面所有没有被名字的路由, 都指向404页面
    {
      path: "/:pathMatch(.*)*",
      name: "NotFound",
      component: () => import("@/views/errors/NotFound.vue"),
    },
  ]
})

// 对Router进行导航守卫的设置
// 全局前置守卫
router.beforeEach(beforeEachHanler)
// 全局后置守卫
// router.afterEach()


export default router
